<template>
  <div>
    <a-drawer
      :title="title"
      :maskClosable="true"
      :width="width"
      placement="right"
      :closable="true"
      @close="handleCancel"
      :visible="visible"
      style="height: 100%;">
      <a-spin :spinning="confirmLoading">
        <j-form-container>
          <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
            <a-row>
              <a-col :span="24" v-if="showProgressItemFlag">
                <a-form-model-item label="施工节点" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="progress">
                  <a-tree-select
                    v-model="model.progress"
                    :label-in-value="true"
                    style="width: 100%"
                    :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
                    :tree-data="treeData"
                    placeholder="请选择施工节点"
                    @change="changeConstruction"
                    tree-default-expand-all
                  >
                  </a-tree-select>
                </a-form-model-item>
              </a-col>
              <a-col :span="24" v-show="showProgressFlag">
                <a-form-model-item label="施工进度" :labelCol="labelCol" :wrapperCol="wrapperCol">
                  <div style="border: 1px solid lightgrey;border-radius: 5px">
                    <span style="margin-left: 15px">完成进度：{{ showProgressValue }}%</span>
                    <van-slider
                      v-model="showProgressValue"
                      button-size="18"
                      style="width: 92%;margin: 20px auto;"  />
                  </div>
                </a-form-model-item>
              </a-col>
              <a-col :span="24">
                <a-form-model-item label="施工日志内容" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="content">
                  <a-textarea
                    v-model="model.content"
                    placeholder="请输入施工日志内容"
                    :auto-size="{ minRows: 3, maxRows: 5 }"
                  />
                </a-form-model-item>
              </a-col>
              <a-col :span="24">
                <a-form-model-item label="请选择上传图片或者视频" :labelCol="labelCol" :wrapperCol="wrapperCol">
                  <a-radio-group default-value="1" v-model="model.uploadResourceType" @change="changeUploadResourceType" button-style="solid">
                    <a-radio-button value="1">
                      图片
                    </a-radio-button>
                    <a-radio-button value="2">
                      视频
                    </a-radio-button>
                  </a-radio-group>
                </a-form-model-item>
              </a-col>
              <a-col :span="24">
                <a-form-model-item :label="currentUploadResourceType == 1 ? '日志图片':'日志视频'" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="progressId">
                  <j-upload v-model="fileList" text="上传" fileType="image" v-show="currentUploadResourceType == 1"></j-upload>
                  <j-video-upload v-model="fileList" text="上传" fileType="file" v-show="currentUploadResourceType == 2" @changeUploadStatus="changeUploadStatus"></j-video-upload>
                </a-form-model-item>
              </a-col>
              <a-col :span="24">
                <a-form-model-item label="是否对业主可见" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="isShow">
                  <a-radio-group v-model="model.isShow" button-style="solid">
                    <a-radio-button :value="1">
                      可见
                    </a-radio-button>
                    <a-radio-button :value="0">
                      不可见
                    </a-radio-button>
                  </a-radio-group>
                </a-form-model-item>
              </a-col>
            </a-row>
          </a-form-model>
        </j-form-container>
      </a-spin>
      <a-button type="primary" @click="handleOk" style="width: 100%">保存</a-button>
    </a-drawer>
  </div>
</template>

<script>
import Vue from "vue";
import { ACCESS_TOKEN } from "@/store/mutation-types"
import { getAction, postAction } from "@api/manage";

export default {
  name: "LogAdd",
  data() {
    return {
      treeData: [],
      uploadStatus: false,
      currentProgressId: 0,
      currentUploadResourceType: 1,
      showProgressItemFlag: false,
      showProgressFlag: false,
      showProgressValue: 0,
      title: '',
      fileList: [],
      width: '100%',
      visible: false,
      customerId: 0,
      phone: '',
      model: {},
      confirmLoading: false,
      labelCol: {
        xs: {span: 24},
        sm: {span: 5},
      },
      wrapperCol: {
        xs: {span: 24},
        sm: {span: 16},
      },
      url: {
        logAdd: "/ghConstructLog/add",
        treeList: "/ghCustomerProgress/treeList"
      },
      validatorRules: {
        progress: [{ required: true, message: '请选择施工节点' }],
        content: [{ required: true, message: '请输入内容' }],
      },
    }
  },
  created() {

  },
  computed: {
    formDisabled() {
      return this.disabled
    },
  },
  methods: {
    changeConstruction(val) {
      this.showProgressFlag = true;
      this.showProgressValue = val.value;
      for (let i = 0; i < this.treeData.length; i++) {
        if (val.value == this.treeData[i].id) {
          this.showProgressValue = this.treeData[i].rate;
          break;
        } else {
          for (let j = 0; j < this.treeData[i].children.length; j++) {
            if (val.value == this.treeData[i].children[j].id) {
              this.showProgressValue = this.treeData[i].children[j].rate;
              break;
            }
          }
        }
      }
    },
    add(customerId) {
      this.visible = true
      this.customerId = customerId;
      this.model.isShow = 1;
      let obj = {isShow:1};
      this.model = Object.assign({}, obj);
      this.initTreeData(customerId);
    },
    close() {
      this.$emit('close');
      this.visible = false;
      this.model = {};
      this.showProgressValue = 0;
      this.currentUploadResourceType = 1
      this.fileList = [];
    },
    initTreeData(customerId) {
      getAction(this.url.treeList, {customerId: customerId}).then((res) => {
        if (res.success) {
          this.treeData = res.result.records || res.result;
        } else {
          this.$message.warning(res.message)
        }
      })
    },
    handleOk() {
      if (this.uploadStatus){
        this.$message.warning("视频未上传完成，请稍等")
        return;
      }
      const that = this;
      // 触发表单验证
      this.$refs.form.validate(valid => {
        if (valid) {
          if (this.showProgressItemFlag){
            if (that.model.progress == null || that.model.progress == ""){
              that.$message.error("请选择施工节点")
              return;
            }else {
              that.model.progressId = that.model.progress.value;
              let obj = this.treeData.filter((item=>{
                return that.model.progress.value === item.id;
              }))
              if (obj.length > 0){
                that.model.taskId = obj[0].taskId;
              }
            }
          }else {
            that.model.progressId = this.currentProgressId;
          }
          if (that.model.content == null || that.model.content == ""){
            that.$message.error("施工日志内容不能为空")
            return;
          }
          if (this.fileList.length > 0){
            this.model.images = this.fileList.toString();
          }
          if (this.model.uploadResourceType == null){
            this.model.uploadResourceType = 1;
          }
          that.model.customerId = that.customerId;
          that.model.rate = that.showProgressValue;
          that.model.phone = that.phone;
          that.confirmLoading = true;
          postAction(that.url.logAdd, that.model).then((res) => {
            if (res.success) {
              that.$message.success(res.message);
              that.$emit('ok');
            } else {
              that.$message.warning(res.message);
            }
          }).finally(() => {
            that.confirmLoading = false;
            this.close()
            this.fileList = [];
          })
        }
      })
    },
    submitCallback() {
      this.$emit('ok');
      this.visible = false;
    },
    handleCancel() {
      this.close()
    },
    changeUploadResourceType(item){
      this.currentUploadResourceType = item.target.value;
    },
    changeUploadStatus(value){
      this.uploadStatus = value
    }
  }
}
</script>

<style scoped>
.ant-upload-select-picture-card i {
  font-size: 32px;
  color: #999;
}

.ant-upload-select-picture-card .ant-upload-text {
  margin-top: 8px;
  color: #666;
}
</style>